<template>
  <div class="person">
    <div class="tree-box">
      <OrgTree ref="orgTreeRef" :tree-data="rec.data" @clickItem="clickItem" />
    </div>
    <div class="btn-group">
      <Btn
        class="btn"
        btnTitle="确定"
        @cancel="
          router.replace(
            '/repairlist/set?repairType=' +
              route.query?.repairType +
              '&status=' +
              route.query?.status +
              '&type=sure' + 
              '&id=' +
              route.query?.id
          )
        "
        @submit="
          router.replace(
            '/repairlist/set?repairType=' +
              route.query?.repairType +
              '&status=' +
              route.query?.status +
              '&type=sure' +
              '&id=' +
              route.query?.id
          )
        "
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Toast } from "vant";
import OrgTree from "../cnps/OrgTree.vue";
import Btn from "./../cnps/btn/index.vue";
import { getOrgList, getPersonList } from "@/service/modules/option/index";
// import LocalCache from "@/utils/cache";
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();
const rec = reactive({
  data: [],
  name: "",
  // personList: LocalCache.getCache("personList"),
});
const orgTreeRef = ref();
// 获取人员结构树 搜索缓存记录
getOrg();
async function getOrg() {
  const { code, data } = await getOrgList();
  if (code === 0) {
    rec.data = [data];
  }
};

// 选择树形数据 获取人员数据
const clickItem = async (item) => {
  if (item.uid) {
    // 组织机构获取人员数据
    const params = {
      current: 1,
      name: "",
      orgCodeList: [item.uid],
      pageSize: 9999,
    };
    if (!item.children) {
      try {
        const toast1 = Toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        const { code, data } = await getPersonList(params);
        if (code === 0) {
          addPerson(rec.data, item.uid, data.list);
          toast1.clear();
        }
      } catch (error) {
        toast1.clear();
      }
    }
  }
};

// 添加人员数据到组织结构
const addPerson = (data, uid, list) => {
  data.map((i) => {
    if (!i.children) {
      if (uid === i.uid) {
        i.children = list;
      }
    } else {
      addPerson(i.children, uid, list);
    }
  });
};

</script>

<style lang="less" scoped>
.person {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f5f5;
  .btn-group {
    padding: 16px 16px 20px 16px;
    position: absolute;
    bottom: 0;
    width: 100%;
    .btn {
      display: flex;
    }
  }
  .search-box,
  .search-record,
  .tree-box,
  .btn-group {
    background: #fff;
  }
  .search-box {
    padding: 10px 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .search {
      width: 100%;
    }
  }
  .search-record {
    padding: 16px;
    margin-bottom: 10px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    &-item {
      // width: 86px;
      height: 32px;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      border-radius: 100px;
      color: #616366;
      font-size: 14px;
      line-height: 32px;
      margin-bottom: 16px;
      margin-right: 16px;
      padding-left: 18px;
      padding-right: 28px;
      position: relative;
      // span {
      //   margin-right: 4px;
      //   margin-left: 16px;
      // }
      svg {
        position: absolute;
        right: 8px;
      }
    }
  }
  .tree-box {
    padding: 0 13px;
    flex: 1;
    height: calc(100vh - 60px);
    /deep/ .van-cell {
      padding: 0;
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .van-cell__right-icon {
        display: none;
      }
      &::after {
        border-bottom: none;
      }
      .van-icon-arrow-down {
        color: #ced3d9;
        margin-right: 9.25px;
      }
    }
    /deep/ [class*="van-hairline"]:after {
      border: none;
    }
    /deep/ .van-collapse-item__content {
      padding: 0;
    }
    /deep/ .ant-tree-treenode {
      height: 50px;
      padding: 15px 50px;
      padding-right: 10px;
      color: #303233;
      border-bottom: 1px solid #f5f5f5;
      .van-icon-arrow {
        display: none;
      }
      .ant-tree-node-content-wrapper {
        display: flex;
        align-items: center;
      }
      &:first-child {
        padding-left: 19.5px;
        .van-icon-arrow {
          display: inline-block;
        }
      }
    }
    /deep/ .ant-tree-switcher {
      display: none;
    }
    /deep/ .ant-tree-iconEle {
      display: flex;
      align-items: center;
      .van-icon-arrow {
        width: 17px;
        height: 17px;
        color: #ced3d9;
        margin-right: 9.35px;
      }
    }
    /deep/ .ant-tree-title {
      font-size: 14px;
      line-height: 20px;
      width: 100%;
    }
    /deep/ .van-radio {
      justify-content: space-between;
    }
    /deep/ .van-cell--clickable:active {
      background-color: transparent;
    }
  }
}
</style>
